<script setup lang='ts'>
import { ref } from 'vue'
const buttomLinkArr = ref([
    {
        title: { text: '慕课乐高', },
        textArr: [
            { text: '购买课程', link: 'https://class.imooc.com/sale/fearchitect', target: '_blank' },
            { text: '作业和打卡', link: 'https://imooc-lego.github.io/', target: '_blank' },
            { text: '开源仓库', link: 'https://github.com/imooc-lego', target: '_blank' },
            { text: '帮助', link: 'https://class.imooc.com/sale/fearchitect', target: '_blank' }
        ]
    },
    {
        title: { text: '设计制作帮助', },
        textArr: [
            { text: '购买课程', link: 'https://class.imooc.com/sale/fearchitect', target: '_blank' },
            { text: '作业和打卡', link: 'https://imooc-lego.github.io/', target: '_blank' },
            { text: '开源仓库', link: 'https://github.com/imooc-lego', target: '_blank' },
            { text: '帮助', link: 'https://class.imooc.com/sale/fearchitect', target: '_blank' }
        ]
    },
    {
        title: { text: '审核问题', },
        textArr: [
            { text: '购买课程', link: 'https://class.imooc.com/sale/fearchitect', target: '_blank' },
            { text: '作业和打卡', link: 'https://imooc-lego.github.io/', target: '_blank' },
            { text: '开源仓库', link: 'https://github.com/imooc-lego', target: '_blank' },
            { text: '帮助', link: 'https://class.imooc.com/sale/fearchitect', target: '_blank' }
        ]
    },
    {
        title: { text: '联系我们', },
        textArr: [
            { text: '购买课程', link: 'https://class.imooc.com/sale/fearchitect', target: '_blank' },
            { text: '作业和打卡', link: 'https://imooc-lego.github.io/', target: '_blank' },
            { text: '开源仓库', link: 'https://github.com/imooc-lego', target: '_blank' },
            { text: '帮助', link: 'https://class.imooc.com/sale/fearchitect', target: '_blank' }
        ]
    },
])
</script>

<template>
    <a-layout-footer>
        <a-row>
            <a-col v-for="item in buttomLinkArr" :span="24 / buttomLinkArr.length">
                <div class="wrapper">
                    <div class="title">{{ item.title.text }}</div>
                    <div class="text" v-for="item1 in item.textArr">
                        <a :href="item1.link" :target="item1.target">{{ item1.text }}</a>
                    </div>
                </div>
            </a-col>
        </a-row>
        <div class="bottom">
            <div class="left">© 慕课网（imooc.com）版权所有 |
                <a href="">津ICP备20000929号-2</a>
            </div>
            <div class="right">
                <div class="text" v-for="item in buttomLinkArr[0].textArr">
                    <a :href="item.link" :target="item.target">
                        {{ item.text }}
                    </a>
                </div>
            </div>
        </div>
    </a-layout-footer>
</template>

<style scoped lang='scss'>
@import '@/assets/styles/mixin.scss';

.ant-layout-footer {
    background: #333;
    color: #999;

    .wrapper {

        .title {
            font-size: 22px;
            color: #fff;
            padding-bottom: 10px;
        }

        .text {
            a {
                display: block;
                height: 30px;
                color: #999;
            }
        }
    }

    .bottom {
        border-top: 1px solid #666;
        padding-top: 20px;
        @include displayCenter();

        .right {
            display: flex;
            margin-left: 20px;

            .text {
                padding: 0 10px;
            }
        }
    }
}
</style>